<template>
  <div class="schoolList" v-for="(data, index) in schoolListArr" :key="index">
    <div class="flex">
      <div class="schoolList-Left">
        <h1 class="add" v-if="data.isNewly">新增</h1>
        <div v-else>
          <div class="df" style="align-items: baseline">
            <div style="font-size: 35px; font-weight: bold">
              {{ data.chance }}
            </div>
            <span>%</span>
          </div>
          <div class="schoolList-Left-size">
            {{ data.probabilityExplain }}
          </div>
        </div>
        <div
          :class="
            data.chance_lv == 1
              ? 'chance1'
              : data.chance_lv == 2
                ? 'chance2'
                : 'chance3'
          "
          class="schoolList-Left-number"
        >
          {{ data.chance_lv == 1 ? '冲' : data.chance_lv == 2 ? '稳' : '保' }}
        </div>
      </div>
      <div class="schoolList-major" @click="handleMajorDet(data)">
        <div
          class="schoolList-major-name"
          v-html="highlightText(data.professionRealName)"
        ></div>
        <div class="schoolList-major-size">{{ data.remarkExt }}</div>
        <div class="schoolList-major-num margintop">
          代码:
          {{ data.professionEnrollCode ? data.professionEnrollCode : '-' }}
          <span v-if="!!data.mseLevel"> | </span>
          <span v-if="!!data.mseLevel" class="mseLevel">{{
            data.mseLevel
          }}</span>
        </div>
      </div>
      <div class="schoolList-Center" @click="toSchoolDetail(data)">
        <div
          class="schoolName"
          v-html="highlightText(data.collegeSourceName)"
        ></div>
        <div class="schoolList-size">
          <p>
            代码: {{ data.collegeEnrollCode }} |
            {{ data.features.join(' / ') }} |
            {{
              data.provinceName +
              ' / ' +
              data.cityName +
              ' / ' +
              data.natureType +
              ' / ' +
              data.categories.join(' / ') +
              ' ' +
              (data.rank ? ' / 排名' + data.rank : '/ 排名 -')
            }}
          </p>
        </div>
      </div>
      <div class="schoolList-people">
        <div class="schoolList-Number" style="font-size: 35px">
          {{ data.planNum }}<span style="font-size: 12px">人</span>
        </div>
        <div class="schoolList-title">
          {{ data.chooseSubjectText ? data.chooseSubjectText : '' }}
        </div>
        <div class="schoolList-title" v-if="!data.majorsInfo">
          {{
            (data.learnYear ? data.learnYear : '-') +
            '年 ￥' +
            (data.cost ? data.cost : '-')
          }}
        </div>
      </div>
      <div class="schoolList-grade">
        <div class="schoolList-grade-left" style="width: 25%">
          <div class="schoolList-grade-size">录取人数</div>
          <div class="schoolList-grade-size">线差</div>
          <div class="schoolList-grade-size">最低分</div>
          <div class="schoolList-grade-size">最低位次</div>
          <div class="schoolList-grade-size schoolList-grade-size-icon">
            <span>等效位差</span>
            <el-tooltip placement="top">
              <template #content>
                什么是等效位差？
                <br />
                历年等效位差根据考生历年的等效位-历年位次的差值得出，
                <br />
                换算后的等效位差可更精准的与历年位次进行比较。
              </template>
              <QuestionFilled style="width: 12px; margin-left: 8px" />
            </el-tooltip>
          </div>
        </div>
        <div
          v-for="moreItem in data.moreYear"
          :key="moreItem.minScore"
          style="width: 25%"
        >
          <div v-if="moreItem.hasPlan" class="schoolList-grade-left">
            <div class="schoolList-grade-size-number">
              {{ moreItem.enterNum }}
            </div>
            <div class="schoolList-grade-size-number">
              {{ moreItem.lineDiff || '-' }}
            </div>
            <div class="schoolList-grade-size-number alitem">
              {{ moreItem.minScore }}
              <div
                v-if="
                  (moreItem.zjText * 1 > 0 && moreItem.minScore * 1 > 0) ||
                  moreItem.zjText == '有征集'
                "
                style="background-color: #fbc7c2; color: red"
              >
                征
              </div>
            </div>
            <div class="schoolList-grade-size-number">
              {{ moreItem.minRank == 0 ? '-' : moreItem.minRank }}
            </div>
            <div class="schoolList-grade-size-number alitem">
              <template
                v-for="(item, index) in getFormatEquivalentBitDifference(
                  moreItem.equivalentBitDifference,
                )"
                :key="index"
              >
                <span :style="{ color: item.color }">
                  {{ item.text }}
                </span>
              </template>
            </div>
          </div>
          <div v-else class="schoolList-grade-left">
            <span
              class="schoolList-grade-size-number alitem"
              style="height: 100%"
              >未招生</span
            >
          </div>
        </div>
      </div>
      <div
        class="schoolList-option alitem"
        style="flex-direction: column; justify-content: center"
      >
        <div
          class="schoolList-look-button curr"
          :class="getFilledCollegeIndex(data) >= 0 ? 'select' : ''"
          :style="{
            color: data.isFit == 0 ? '#ccc !important' : '',
            border: data.isFit == 0 ? '1px solid #ccc !important' : '',
          }"
          @click="onClickTianbao(data)"
        >
          {{
            getFilledCollegeIndex(data) >= 0
              ? '已填' + (getFilledCollegeIndex(data) + 1)
              : '填报'
          }}
        </div>
        <span
          v-if="data.majorEnrollTypesLable"
          style="font-size: 14px; color: #ff7d00"
          >{{ major.majorEnrollTypesLable }}</span
        >
        <div
          style="text-align: center; font-size: 12px; color: red"
          v-if="data.isFit == 0"
        >
          选科不符
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { safeFormatEquivalentBitDifference } from '@/utils/formatEquivalentBitDifference.js';
const router = useRouter();

const store = useStore();

const props = defineProps({
  // 院校列表数据
  schoolListArr: {
    type: Array,
    default: () => [],
  },
  // 可填写志愿表数量
  volunteerNumber: {
    type: String,
    default: '0',
  },
  // 筛选条件
  userSearchDate: {
    type: Array,
    default: () => [],
  },
});
const userSearchDateString = ref('');
watchEffect(() => {
  userSearchDateString.value = props.userSearchDate.map((item) => item.name);
});
const highlightText = (text) => {
  if (userSearchDateString.value.length === 0) return text; // 没有选中标签时直接返回原文本
  // 遍历选中的标签，构建正则表达式
  const regex = new RegExp(`(${userSearchDateString.value.join('|')})`, 'gi'); // 使用 | 作为正则的 OR 操作符
  // 使用 \\\$1 来正确引用正则的捕获组
  return text.replace(
    regex,
    '<span style="color: #409eff; font-weight: bold;">$&</span>', // 直接使用 $& 引用匹配到的整个字符串
  );
};

// 动态获取等效位差的页面结构
const getFormatEquivalentBitDifference = (val) => {
  return safeFormatEquivalentBitDifference(val);
};

// 点击院校跳转
function toSchoolDetail(data) {
  localStorage.setItem('collegeDetAct', '1');
  localStorage.setItem('code', data.collegeCode);
  window.open(
    router.resolve('/college/detail?collegecode=' + data.collegeCode).href,
    '_blank',
  );
}

// 点击专业跳转
function handleMajorDet(item) {
  let level = '';
  if (item.eduLevel == '本科') {
    level = 'benke';
  } else if (item.eduLevel == '专科') {
    level = 'zhuanke';
  }
  localStorage.setItem('level', level);
  const url =
    '/majorLibrary/majorLibraryDet' +
    '?code=' +
    item.majorCode +
    '&name=' +
    item.professionRealName +
    '&level=' +
    level;
  window.open(url, '_blank');
}

// 当前填报志愿表数据
const volunteerInfos = ref(
  computed(() => store.getters.tianbao.volunteerInfos),
);

// 是否已填志愿表并返回填报的志愿表下标
function getFilledCollegeIndex(data) {
  return volunteerInfos.value.findIndex((item) => item.id == data.id);
}

// 点击填报按钮 data:学校数据  major:专业数据
function onClickTianbao(data) {
  if (data.isFit == 1) {
    const volunteerInfo = volunteerInfos.value;
    // 两种情况  用户点了志愿表  用户没有填志愿表
    if (volunteerInfo?.length == props.volunteerNumber) {
      ElMessage({
        message: `当前所选专业已达上限（${props.volunteerNumber}）`,
        type: 'warning',
      });
      return;
    }

    const index = getFilledCollegeIndex(data);

    if (index > -1) {
      volunteerInfo.splice(index, 1);
    } else {
      volunteerInfo.push(data);
    }

    volunteerInfos.value = volunteerInfo;
    store.dispatch(
      'tianbao/setVolunteerInfos',
      JSON.parse(JSON.stringify(volunteerInfo)),
    );
  } else {
    return;
  }
}

function removeVolunteerInfos() {
  volunteerInfos.value = [];
}

defineExpose({
  removeVolunteerInfos,
});
</script>
<style lang="scss" scoped>
.schoolList {
  display: flex;
  flex-direction: column;
  border-right: none;
  background: #fff;
  position: relative;
  border-bottom: 1px solid #e5e6eb;

  .schoolList-look-button {
    color: #165dff;
    width: 90px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #165dff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }

  .schoolList-look-button.select {
    color: white;
    background-color: #165dff;
  }

  .schoolList-grade {
    display: flex;
    width: 40%;

    .schoolList-grade-left {
      display: flex;
      flex-direction: column;
      height: 100%;

      .schoolList-grade-size {
        height: 25%;
        padding: 10px 5px;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        border-bottom: 1px solid #f2f3f5;
        border-right: 1px solid #f2f3f5;
      }

      .schoolList-grade-size-number {
        height: 20%;
        padding: 10px 5px;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        border-bottom: 1px solid #f2f3f5;
        border-right: 1px solid #f2f3f5;
        padding-left: 10px;
      }

      .schoolList-grade-size-icon {
        align-items: center;
        display: flex;
        flex-direction: row;
      }
    }
  }

  .schoolList-option {
    width: 14%;
  }

  .schoolList-people {
    width: 11.2%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 18px 0;
    border-right: 1px solid #e5e6eb;

    .schoolList-Number {
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      color: #1d2129;
      line-height: 24px;
    }

    .schoolList-title {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 1.5;
    }
  }

  .schoolList-major {
    cursor: pointer;
    width: 15%;
    padding: 14px;
    border-right: 1px solid #e5e6eb;

    .schoolList-major-name {
      font-size: 14px;
      font-weight: 500;
      color: #1d2129;
      line-height: 14px;
    }

    .schoolList-major-size {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 400;
      color: #4e5969;
      line-height: 24px;
    }

    .schoolList-major-num {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 18px;

      .mseLevel {
        background-color: #fbe6e8;
        padding: 2px 4px;
        font-size: 10px;
        color: #f54f4a;
      }
    }
  }

  .schoolList-Center {
    cursor: pointer;
    width: 17.1%;
    margin-bottom: 10px;

    .schoolName {
      font-size: 18px;
      font-weight: 500;
      color: #1d2129;
      line-height: 27px;
      margin-left: 20px;
      margin-top: 20px;
    }

    .schoolName-size {
      font-size: 14px;
      font-weight: 400;
      color: #1d212c;
      line-height: 27px;
      margin-left: 20px;
      margin-top: 20px;
    }

    .schoolList-size {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 24px;
      display: flex;
      margin-left: 20px;
      align-items: center;
    }

    .schoolList-bottom {
      display: flex;
      margin-left: 20px;
      margin-top: 10px;
      margin-bottom: 10px;

      .schoolList-bottom-size {
        background: #fff;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #bcc3cc;
        font-size: 12px;
        font-weight: 400;
        color: #86909c;
        padding: 0 4px;
        margin: 0 4px;
      }
    }
  }

  .schoolList-Left {
    width: 7%;
    padding-left: 20px;
    padding-top: 18px;
    padding-bottom: 18px;
    border-right: 1px solid #f2f3f5;

    .schoolList-Left-size {
      text-align: left;
      font-size: 12px;
      font-family:
        PingFang SC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #86909c;
      line-height: 12px;
    }

    .schoolList-Left-number {
      width: 20px;
      height: 20px;
      // background-color: #F53F3F;
      text-align: center;
      line-height: 20px;
      border-radius: 4px;
      color: #fff;
    }
  }
}

.chance1 {
  background-color: #f53f3f;
  margin-top: 10px;
}

.chance2 {
  background-color: #ff8c33;
}

.chance3 {
  background-color: #00bf10;
}
.add {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
  font-size: 24px;
}
</style>
